<template>
  <div class="coder-icon">
    <span @click="dialogVisible = !dialogVisible" :title="title"  class="coder-action"><CodeBlockIcon /></span>
    <div v-if="showType === 'slider'" class="coder-slider">
      <Coder v-bind="$props" ref="coder" />
    </div>
    <Dialoger v-model="dialogVisible" :onConfirm="handleSubmitCoder" :dialogCls="'coder-slider d-paner-lg'" :title="title">
      <template v-slot:body>
        <Coder v-bind="$props" @input="handleUpdate" ref="coder" />
      </template>
    </Dialoger>
  </div>
</template>

<script>
import { CodeBlockIcon } from '@daelui/vdog/dist/icons'
import { Coder } from '@daelui/vdog/dist/coder'
import { Dialoger } from '@daelui/vdog/dist/components'

export default {
  components: {
    CodeBlockIcon,
    Coder,
    Dialoger
  },

  props: {
    title: {
      type: String,
      default: '编码'
    },
    showType: {
      type: String,
      default: 'dialoger'
    },
    isInitEvents: {
      type: Boolean,
      default: true
    },
    value: {
      type: String,
      default: ''
    },
    language: {
      type: String,
      default: 'javascript'
    },
    height: {
      type: String,
      default: '360px'
    },
    workerBaseUrl: {
      type: String,
      default: ''
    }
  },

  model: {
    prop: 'value'
  },

  data () {
    return {
      dialogVisible: false,
      currentValue: ''
    }
  },

  watch: {
    value () {
      this.currentValue = this.value
    }
  },

  beforeMount () {
    this.currentValue = this.value
  },

  methods: {
    handleUpdate (value) {
      this.currentValue = value
    },
    handleSubmitCoder () {
      this.$emit('input', this.currentValue)
    }
  }
}
</script>

<style lang="less">
.coder-icon {
  .coder-action {
    padding: 5px 0;
    font-size: 24px;
    color: #409EFF;
    cursor: pointer;
  }
}
.coder-icon-dialog {
  .el-dialog__body {
    padding: 8px 20px;
  }
}
</style>
